<template>
	<view class="statistics-detail-container">
		<view class="statistics-detail-item">
			<view class="detail-item-top">
				<view class="detail-title">
					<image :src="titleIcon" class="title-icon" />
					<text>近一周出勤统计</text>
				</view>
			</view>
			<view class="detail-main">
				<view class="title-container">
					<view class="title-item">出勤率</view>
					<view class="title-item">人数(人)</view>
				</view>
				<view class="month-attendance-chart">
					<l-echart ref="monthAttendanceChart"></l-echart>
				</view>
			</view>
		</view>
		<view class="statistics-detail-item">
			<view class="detail-item-top">
				<view class="detail-title">
					<image :src="titleIcon" class="title-icon" />
					<text>年龄</text>
				</view>
				<view class="detail-unit">单位：人</view>
			</view>
			<view class="detail-main">
				<view class="age-chart">
					<l-echart ref="ageChart"></l-echart>
				</view>
			</view>
		</view>
		<view class="statistics-detail-item">
			<view class="detail-item-top">
				<view class="detail-title">
					<image :src="titleIcon" class="title-icon" />
					<text>学历</text>
				</view>
				<view class="detail-unit">单位：人</view>
			</view>
			<view class="detail-main">
				<view class="education-chart">
					<l-echart ref="educationChart"></l-echart>
				</view>
			</view>
		</view>
		<view class="statistics-detail-item">
			<view class="detail-item-top">
				<view class="detail-title">
					<image :src="titleIcon" class="title-icon" />
					<text>籍贯</text>
				</view>
				<view class="detail-unit">单位：人</view>
			</view>
			<view class="detail-main">
				<view class="nation-chart">
					<l-echart ref="nationChart"></l-echart>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { common } from '@/pagesA/utils/common.js';
// import titleIcon from '@/pagesA/assets/image/title-icon.png';
import * as echarts from 'echarts';
import LEchart from '@/pagesA/uni_modules/lime-echart/components/l-echart/l-echart';

const app = getApp();
export default {
	components: {
		LEchart
	},
	props: ['current', 'projectUuid'],
	data() {
		return {
			titleIcon: common.imgs.titleIcon,
			statisticTime: [],
			allOnDutyCount: [],
			allAttendanceRate: [],
			allAttendanceCount: [],
			ageRange: [],
			latest1MonthAttendanceTendency: [],
			province: [],
			education: [],
			maxAttendanceNum: 0
		};
	},
	watch: {
		current(newVal) {
			if (newVal == 0) {
				this.getStatistic();
			}
		}
	},
	methods: {
		handleMonthAttendanceData(arr) {
			this.statisticTime = [];
			this.allOnDutyCount = [];
			this.allAttendanceRate = [];
			this.allAttendanceCount = [];
			this.maxAttendanceNum = 0;
			for (let item of arr) {
				this.statisticTime.push(item.date);
				this.allOnDutyCount.push(item.allOnDutyCount);
				if (item.allOnDutyCount > this.maxAttendanceNum) {
					this.maxAttendanceNum = item.allOnDutyCount;
				}
				this.allAttendanceRate.push(Number((item.allAttendanceRate * 100).toFixed(1)));
				this.allAttendanceCount.push(item.allAttendanceCount);
				if (item.allAttendanceCount > this.maxAttendanceNum) {
					this.maxAttendanceNum = item.allAttendanceCount;
				}
			}
			this.maxAttendanceNum += 1;
			this.initWeekAttendanceChart();
		},
		handleProvinceData(arr) {
			this.province = [];
			for (let item of arr) {
				this.province.push({ value: item.count, name: item.name });
			}
			this.initNationChart();
		},
		getStatistic() {
			//获取汇总统计数据
			let params = {
				projectUuid: this.projectUuid
			};
			!params.projectUuid && delete params.projectUuid;
			common.apis.projectSurvey.getStatistic(params).then((res) => {
				this.handleMonthAttendanceData(res.data.latest1MonthAttendanceTendency || []);
				this.ageRange = res.data.ageRange;
				this.initAgeChart();
				this.education = res.data.education;
				this.initEducationChart();
				this.handleProvinceData(res.data.province);
			});
		},
		async initWeekAttendanceChart() {
			const chart = await this.$refs.monthAttendanceChart.init(echarts);
			var option = {
				color: ['#0071F7', '#EE8115', '#12C361'],
				tooltip: {
					trigger: 'axis',
					textStyle: {
						fontSize: 12
					}
				},
				legend: {
					bottom: '0%',
					data: ['出勤率', '出勤人数', '在岗人数'],
					textStyle: {
						fontSize: '12px',
						color: '#949DBF'
					}
				},
				grid: {
					top: '5%',
					left: '2%',
					right: '4%',
					bottom: '20%',
					containLabel: true
				},
				dataZoom: [
					{
						type: 'slider',
						xAxisIndex: [0],
						start: 0,
						end: 100,
						minValueSpan: 7,
						maxValueSpan: 7,
						bottom: '10%'
					}
				],
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: this.statisticTime,
					axisLine: {
						show: true,
						lineStyle: {
							color: '#949DBF'
						}
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						fontSize: '10px',
						color: '#949DBF',
						interval: 0
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#CCCCCC'
						}
					}
				},
				yAxis: [
					{
						show: true,
						type: 'value',
						min: 0,
						max: 100,
						axisLabel: {
							fontSize: '12',
							color: '#949DBF'
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed'
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						}
					},
					{
						show: true,
						type: 'value',
						min: 0,
						max: this.maxAttendanceNum,
						axisLabel: {
							fontSize: '12',
							color: '#949DBF'
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed'
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						}
					}
				],
				series: [
					{
						name: '出勤率',
						symbolSize: 7,
						data: this.allAttendanceRate,
						type: 'line'
					},
					{
						name: '出勤人数',
						symbolSize: 7,
						data: this.allAttendanceCount,
						type: 'line',
						yAxisIndex: 1
					},
					{
						name: '在岗人数',
						symbolSize: 7,
						data: this.allOnDutyCount,
						type: 'line',
						yAxisIndex: 1
					}
				]
			};
			chart.setOption(option);
		},
		async initAgeChart() {
			let xData = [];
			let manData = [];
			let womanData = [];
			for (let item of this.ageRange) {
				xData.push(item.value);
				manData.push(item.manCount);
				womanData.push(item.womanCount);
			}
			const chart = await this.$refs.ageChart.init(echarts);
			var option = {
				color: ['#0071F7', '#EE8115'],
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['男性', '女性']
				},
				toolbox: {
					show: true
				},
				grid: {
					top: '15%',
					left: '0%',
					right: '0%',
					bottom: '8%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: xData,
						axisTick: {
							show: false
						},
						axisLabel: {
							fontSize: '12',
							color: '#949DBF'
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#949DBF'
							}
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						axisLabel: {
							fontSize: '12',
							color: '#949DBF'
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#949DBF'
							}
						},
						splitLine: {
							show: false //去掉网格线
						}
					}
				],
				series: [
					{
						name: '男性',
						type: 'bar',
						data: manData,
						barWidth: 16
					},
					{
						name: '女性',
						type: 'bar',
						data: womanData,
						barWidth: 16
					}
				]
			};
			chart.setOption(option);
		},
		async initEducationChart() {
			let indicator = [];
			let sum = 0;
			let index = 0;
			let yData = [];
			for (let item of this.education) {
				sum += item.count;
				index += 1;
				indicator.push({
					name: item.value,
					max: 100,
					count: item.count
				});
				yData.push(item.count);
			}
			let avg = Number((sum / index).toFixed(0));
			for (let indicatorItem of indicator) {
				indicatorItem.max = indicatorItem.count > avg ? indicatorItem.count + 10 : avg;
			}
			const chart = await this.$refs.educationChart.init(echarts);
			var option = {
				color: ['#12C361'],
				grid: {
					top: '20%'
				},
				tooltip: {
					trigger: 'axis'
				},
				radar: {
					indicator: indicator,
					startAngle: 130,
					nameGap: 8,
					splitArea: {
						areaStyle: {
							color: ['#ffffff', '#eaedf1']
						}
					},
					axisLine: {
						lineStyle: {
							color: '#949DBF'
						}
					},
					splitLine: {
						lineStyle: {
							color: '#949DBF'
						}
					}
				},
				series: [
					{
						type: 'radar',
						tooltip: {
							trigger: 'item'
						},
						areaStyle: {
							color: 'rgba(18,195,97,0.2)'
						},
						data: [
							{
								value: yData,
								name: '学历',
								label: {
									show: true,
									color: '#1E253F'
								}
							}
						]
					}
				]
			};
			chart.setOption(option);
		},
		async initNationChart() {
			const chart = await this.$refs.nationChart.init(echarts);
			var option = {
				color: ['#0071F7', '#EE8115', '#12C361', '#FDB250', '#949DBF'],
				tooltip: {
					trigger: 'item'
				},
				legend: {
					right: '0',
					bottom: '5%',
					left: 'center'
				},
				toolbox: {
					show: true,
					feature: {
						mark: { show: true }
					}
				},
				series: [
					{
						type: 'pie',
						radius: ['30%', '50%'],
						center: ['50%', '40%'],
						itemStyle: {},
						label: {
							show: true,
							fontSize: 12,
							color: '#949DBF',
							formatter(param) {
								return param.name + '\n' + param.percent + '%';
							}
						},
						labelLine: {
							show: true,
							lineStyle: {
								color: '#949DBF'
							}
						},
						data: this.province
					}
				]
			};
			chart.setOption(option);
		}
	}
};
</script>

<style>
.statistics-detail-item {
	margin-bottom: 16rpx;
	background: #ffffff;
}
.statistics-detail-item:last-child {
	margin-bottom: 0rpx;
}
.detail-item-top {
	padding: 0 30rpx;
	border-bottom: 2rpx solid #eeeeee;
	height: 81rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1e253f;
	display: flex;
	align-items: center;
}
.detail-item-top .detail-title {
	display: flex;
	align-items: center;
}
.detail-title .title-icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 8rpx;
}
.detail-item-top .detail-unit {
	margin-left: auto;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #949dbf;
}

.detail-main {
	padding: 20rpx 30rpx;
}
.detail-main .month-attendance-tags {
	display: flex;
	align-items: center;
}
.month-attendance-tags .month-attendance-tag {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48rpx;
	background: #f3f4f6;
	border-radius: 8rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
	padding: 0 16rpx;
}
.month-attendance-tags .month-attendance-tag:last-child {
	margin-left: auto;
}
.title-container {
	margin-top: 4rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.title-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 104rpx;
	height: 48rpx;
	background: #f3f4f6;
	border-radius: 8rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #4b5680;
}
.month-attendance-chart {
	height: 480px;
}
.age-chart {
	height: 340px;
}
.education-chart {
	height: 340px;
}
.nation-chart {
	height: 340px;
}
</style>
